<template>
	<view class="big-Box">
		<view bgColor="#fff" class="top-tab">
			<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
		</view>
		<view class="main-content">
			<view class="left-box">
				<view class="item" :class="[item.id == leftActive?'item-active':'']" v-for="item in leftList"
					:key="item.id" @click="handleLeft(item)">
					<view class="relative">
						{{`${item.label}`}}
						<u-badge absolute :offset="[8,-12]" type="error" max="99" :value="item.num"></u-badge>
					</view>
				</view>
			</view>
			<view class="right-box">
				<view v-if="leftActive == 1">
					<view class="top-tags">显示提交待处理及近三个月已处理的任务</view>
					<view class="main-box" v-for="item in mineList" :key="item.id"
						@click="handleToCheck(item,'smallTakeNum')">
						<view class="double-title">
							<view class="title" style="flex: 1;">{{item.dangerSite}}</view>
							<view class="title-right"
								:class="[item.auditStatus==1?'title-finish-repair':item.auditStatus==2?'title-error-repair':item.auditStatus==0?'title-dyz-repair':'']">
								{{item.auditStatus==1?'通过':item.auditStatus==2?'不通过':item.auditStatus==0?'待审核':''}}
							</view>
						</view>
						<view class="double-content maBot">{{item.dangerDesc}}</view>
						<view class="content">{{item.createTime}}</view>
					</view>
				</view>
				<view v-if="leftActive == 2">
					<view class="top-tags">显示提交待处理及近三个月已处理的任务</view>
					<view class="main-box" v-for="item in mineList" :key="item.id">
						<view class="double-title">
							<!-- <view class="logo">{{item.repairType == 1?'内':'外'}}</view> -->
							<view class="title title1" style="flex: 1;">{{item.repairOrderNum}}</view>
							<view class="title-right"
								:class="[item.repairStatus==1?'title-dyz-repair':item.repairStatus==2?'title-finish-repair':item.repairStatus==3?'title-dyz-repair':item.repairStatus==5?'title-finish-repair':item.repairStatus==9?'title-close-repair':'title-close-repair']">
								{{item.repairStatus==1?'待维修':item.repairStatus==2?'维修中':item.repairStatus==3?'待验证':item.repairStatus==5?'维修完成':item.repairStatus==9?'维修关闭':'关闭-待验证'}}
							</view>
						</view>
						<view class="line1" style="margin-top: 26rpx;"></view>
						<view class="content maBot1">设备名：<text class="txt">{{item.deviceName}}</text></view>
						<view class="content maBot1">设备编号：<text class="txt">{{item.deviceNum}}</text></view>
						<view class="content maBot1">故障描述：<text class="txt">{{item.description}}</text></view>
						<view class="content maBot1">报修时间：<text class="txt">{{item.createTime}}</text></view>
						<view class="bottom-btn">
							<view class="bg-btn" @click="toSelectDetail(item)">查看详情</view>
						</view>
					</view>
				</view>
				<view v-if="leftActive == 3">
					<view class="top-tags">显示提交待处理及近三个月已处理的任务</view>
					<view class="main-box" v-for="item in mineList" :key="item.id"
						@click="handleToCheck(item,'partApplyNum')">
						<view class="double-title">
							<view class="title">申请单号{{item.applyNum}}</view>
							<view class="title-right title-dyz-repair">
								{{current == 0 ? '待处理' : '已处理'}}
							</view>
						</view>
						<view class="line1" style="margin-top: 26rpx;"></view>
						<view class="content maBot1">维修单号：<text class="txt">{{item.orderNum}}</text></view>
						<view class="content maBot1">申请数量：<text class="txt">{{item.applyAmount}}</text>件</view>
						<view class="content maBot1">申请时间：<text class="txt">{{item.createTime}}</text></view>

					</view>
				</view>
				<view v-if="leftActive == 4">
					<view class="top-tags">显示提交待处理及近三个月已处理的任务</view>
					<view class="main-box" v-for="item in mineList" :key="item.id"
						@click="handleToCheck(item,'partRefundNum')">
						<view class="double-title">
							<view class="title title1">申请单号{{item.applyNum}}</view>
							<view class="title-right title-dyz-repair">
								{{current == 0 ? '待处理' : '已处理'}}
							</view>
						</view>
						<view class="line1" style="margin-top: 26rpx;"></view>
						<view class="content maBot1">维修单号：<text class="txt">{{item.orderNum}}</text></view>
						<view class="content maBot1">申请数量：<text class="txt">{{item.refundAmount}}</text>件</view>
						<view class="content maBot1">申请时间：<text class="txt">{{item.createTime}}</text></view>

					</view>
				</view>
				<u-loadmore v-if="total>8" :status="status" :line="true" />
				<view class="empty-data" v-if="mineList.length == 0">
					<u-empty mode="data" :marginTop="50"></u-empty>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '待处理',
				}, {
					name: '已处理',
				}],
				status: 'loadmore',
				leftActive: 1,
				typeActive: 'smallTakeNum',
				leftList: [{
					id: '1',
					label: '随手拍',
					type: 'smallTakeNum',
					num: 0,
					show: true
				}, {
					id: '2',
					label: '报修',
					type: 'repairNum',
					num: 0,
					show: true
				}, {
					id: '3',
					label: '备件申请',
					type: 'partApplyNum',
					num: 0,
					show: true
				}, {
					id: '4',
					label: '备件退还',
					type: 'partRefundNum',
					num: 0,
					show: true
				}],
				mineList: [],
				params: {
					pn: 1,
					ps: 8,
					dealFlag: 0, //处理标识；0.待处理   1.已处理
				},
				pages: 1,
				total: 0,
			}
		},
		onShow() {
			this.mineList = []
			this.params.pn = 1
			this.getNum()
			this.getList()
		},
		methods: {
			getNum() {
				uni.$u.http.get(`/device/mobile/deviceRepair/getSubmitNum`).then(res => {
					if (res.code == 0) {
						this.leftList.map(item => {
							item.show = true
							item.num = res.data[item.type]
						})
					}
				}).catch(err => {})
			},
			getList() {
				let url = ''
				let params = JSON.parse(JSON.stringify(this.params))
				switch (this.typeActive) {
					case 'smallTakeNum':
						url = '/check/mobile/appSmallTake/getNotDealSmallTakeList'
						params.type = 1
						break;
					case 'repairNum':
						url = '/device/mobile/deviceRepair/getNotDealRepairList'
						params.type = 1
						break;
					case 'partApplyNum':
						url = '/device/mobile/devicePartApply/getNotDealPartApplyList'
						params.type = 1
						break;
					case 'partRefundNum':
						url = '/device/mobile/devicePartRefund/getNotDealPartRefundList'
						params.type = 1
						break;
					default:
						url = ''
				}
				if (!url) return
				uni.$u.http.post(url, params).then(res => {
					if (res.code == 0) {
						this.mineList = this.mineList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				this.mineList = []
				this.params.dealFlag = e.index;
				this.getList()
				if (e.index == 0) {
					this.getNum()
				} else {
					this.leftList = [{
						id: '1',
						label: '随手拍',
						type: 'smallTakeNum',
						num: 0,
						show: false
					}, {
						id: '2',
						label: '报修',
						type: 'repairNum',
						num: 0,
						show: false
					}, {
						id: '3',
						label: '备件申请',
						type: 'partApplyNum',
						num: 0,
						show: false
					}, {
						id: '4',
						label: '备件退还',
						type: 'partRefundNum',
						num: 0,
						show: false
					}]
				}
			},
			handleLeft(item) {
				if (item.type === this.typeActive) return
				this.leftActive = item.id
				this.mineList = []
				this.params.pn = 1
				this.typeActive = item.type
				this.getList()
			},
			handleToCheck(item, type) {
				if (type === 'smallTakeNum') {
					// 随手拍
					if (item.auditStatus == 0) {
						// 待审核
						uni.navigateTo({
							url: `/pages/subPackagesA/randomClap/waitRandom?randomId=${item.id}&type=${1}&current=${0}`
						})
					} else {
						// 审核通过 未通过
						uni.navigateTo({
							url: `/pages/subPackagesA/randomClap/successRandom?isStatus=${item.auditStatus}&randomId=${item.id}`
						})
					}
				} else if (type === 'partApplyNum') {
					// 备件申请
					uni.navigateTo({
						url: '/pages/subPackagesB/bjverify/spdetail?id=' + item.id
					})
				} else if (type === 'partRefundNum') {
					// 备件退还
					uni.navigateTo({
						url: '/pages/subPackagesB/bjreturn/returnDetail?id=' + item.id
					})
				}
			},
			toSelectDetail(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/repairList/wxDetail?orderNum=${item.repairOrderNum}&repairId=${item.id}&isNoBtn=${true}`
				})
			},
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	.line1{
		margin-bottom: 20rpx;
	}
	.top-tab {
		position: fixed;
		z-index: 10000;
		top: 0;
		width: 100%;
		background-color: #fff;
	}

	.big-Box {
		height: 100%;
		padding-top: 48px;

		.main-content {
			display: flex;
			height: calc(100vh - 52px);
			border-top: 2rpx solid #f2f2f2;
		}

		.left-box {
			position: fixed;
			left: 0;
			height: 100vh;
			min-width: 108px;
			// border-right: 1px solid #F2F2F2;
			background: #F5F5F5;

			.item {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				border-left: 8rpx solid #fff;
				color: #666666;

				.relative {
					padding-left: 24rpx;
					position: relative;
					display: inline-block;
				}
			}

			.item-active {
				border-left: 8rpx solid #0F53AC;
				color: #2B2B2B;
				background: #ffffff;
			}
		}

		.right-box {
			flex: 1;
			width: calc(100% - 108px);
			margin-left: 108px;

			.tags {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 4rpx 24rpx 4rpx 24rpx;
				border-radius: 8rpx;
				border: 1px solid #0F53AC;
				color: #0F53AC;
				font-size: 28rpx;
			}

			.top-tags {
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
				padding: 30rpx 0;
				color: #8c8c8c;
				background-color: #ffffff;
			}

			.main-box {
				padding: 32rpx;
				border-bottom: 1px solid #EDEDED;

				.double-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.title{
						font-size: 28rpx;
						color:#2B2B2B;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}
					.title1{
						color:#666666;
					}
				}

				.logo {
					border-radius: 4px;
					border: 1px solid rgba(15, 83, 172, 1);
					color: #0F53AC;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 2px 5px 2px 5px;
					margin-right: 8rpx;
				}

				.title {
					color: #2B2B2B;
					font-size: 34rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.content {
					color: #8C8C8C;
					font-size: 28rpx;
					margin-top: 20rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.double-content {
					color: #4D4D4D;
					font-size: 28rpx;
					margin: 20rpx 0 36rpx;
					overflow: hidden; //超出文本隐藏
					text-overflow: ellipsis; ///超出部分省略号显示
					display: -webkit-box; //弹性盒模型
					-webkit-box-orient: vertical; //上下垂直
					-webkit-line-clamp: 2; //自定义行数
					word-break: break-all;
					word-wrap: break-word;
				}

				.maBot {
					margin-bottom: 0px;
				}
				.maBot1{
					margin-top: 8rpx;
				}

				.bottom-btn {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 24rpx;
					padding-top: 24rpx;
					border-top: 1px solid #f2f2f2;

					.bg-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 17px;
						font-weight: 400;
						line-height: 24.62px;
						color: rgba(102, 102, 102, 1);
					}

					.bg-btn2 {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 17px;
						font-weight: 400;
						line-height: 24.62px;
						color: #0F53AC;
					}
				}

				.image-box {
					width: 100%;

					.title-image {
						display: block;
						width: 100%;
						height: 200rpx;
						border-radius: 4px;
					}
				}
			}

			.bottom-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
				font-size: 28rpx;

				.right-tags {
					display: flex;
					align-items: center;
				}

				// 隐患 重新整改 未整改
				.hidden-tags {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4rpx 24rpx 4rpx 24rpx;
					border-radius: 8rpx;

				}

				.red-tags {
					background-color: rgba(255, 77, 77, 0.2);
					color: #FA4016;
				}

				.orange-tags {
					background-color: rgba(252, 119, 10, 0.2);
					color: #FC770A;
				}
			}

			.title-right {
				min-width: 86rpx;
				// height: 48rpx;
				// line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
			}

			.title-ongoing {
				color: #858585;
				background-color: #DBDBDB;
			}

			.title-dyz {
				color: #fff;
				background-color: #0070C0;
			}

			.title-yellow {
				color: #5C5C5C;
				background-color: #FFFF00;
			}

			.title-close {
				color: #fff;
				background-color: #E36C09;
			}

			.title-finish {
				color: #fff;
				background-color: #FF0000;
			}

			.title-dyz-repair {
				color: #0F53AC;
				background-color: rgba(15, 83, 172, 0.2);
			}

			.title-close-repair {
				color: #FC770A;
				background-color: rgba(252, 119, 10, 0.2);
			}

			.title-finish-repair {
				color: #02AD82;
				background-color: rgba(2, 173, 130, 0.2);
			}

			.title-error-repair {
				color: #FF4D4D;
				background: rgba(255, 77, 77, 0.2);
			}

		}
	}

	.txt {
		color: #4D4D4D;
	}
</style>